<template>
    <view>
        <view class="body" style="background-color: transparent">
            <!-- <image src="../../image/notfound.png" style="width: 100%;height: 120px;" mode="widthFix"></image> -->
            <view class="f fpj fac padding-bottom-sm padding-lr-lg">
                <view class="searchBoxs f fpj fac" @tap="toSearch">
                    <!-- <view>搜索建议</view> -->
                    <input class="weui-input width_1" placeholder="搜索建议" />
                    <view class="f fv fac">
                        <image class="icon_s" src="/static/image/search.png" mode="aspectFill"></image>
                    </view>
                </view>
                <view class="cuIcon-cartfill text-green f fac fpc" style="font-size: 22px"></view>
            </view>
            <view class="VerticalBox">
                <scroll-view class="VerticalNav nav" scroll-y scroll-with-animation>
                    <view :class="index == tabCur ? 'cu-item text-green cur' : 'cu-item'" :data-index="index" @tap="TabSelect" v-for="(item, index) in list" :key="index">
                        物品-{{ index + 1 }}
                    </view>
                </scroll-view>
                <view class="f fv padding-left" style="width: calc(100% - 200rpx)">
                    <view class="f fac fpc bg-white" style="height: 80rpx">
                        <view :class="'f fpc width_3 ' + (sort == 1 ? 'text-green font_w' : 'text-gray')" data-index="1" @tap="toSort">综合排序</view>
                        <view :class="'f fpc width_3 ' + (sort == 2 ? 'text-green font_w' : 'text-gray')" data-index="2" @tap="toSort">
                            按价格
							<!-- <uni-icons type="pulldown" size="20" :animation="animationData"></uni-icons> -->
                            <view class="cuIcon-unfold" :animation="animationData"> ↑</view>
                        </view>
                        <view :class="'f fpc width_3 ' + (sort == 3 ? 'text-green font_w' : 'text-gray')" data-index="3" @tap="toSort">按销量</view>
                    </view>
                    <scroll-view class="VerticalMain" scroll-y scroll-with-animation>
                        <view class="padding-top">
                            <view v-if="isLoad" :class="isLoad ? 'cu-load bg-grey loading' : 'cu-load bg-grey over'"></view>
                            <view v-else class="f fv bg-white p10">
                                <view class="f fv">
                                    <view class="f padding-tb-sm items mb_2" v-for="(item, index) in jplist" :key="index">
                                        <image
                                            :src="item.img"
                                            @tap="goDetail"
                                            :data-index="item.name"
                                            :data-i="item.img"
                                            style="width: 160rpx; height: 140rpx; margin-right: 20rpx"
                                        ></image>
                                        <view class="item_2 f fv fpa f1">
                                            <view class="" @tap="goDetail" :data-index="item.name" :data-i="item.img">{{ item.name }}</view>
                                            <view class="text-price" @tap="goDetail" :data-index="item.name" :data-i="item.img">{{ item.price }}</view>
                                            <view class="f fac fpj">
                                                <view class="cu-tag bg-green light sm round">新茶</view>
                                                <view class="cuIcon-cart text-green f fac fpc" style="font-size: 20px" @tap="addshopcar" :data-i="item"></view>
                                            </view>
                                        </view>
                                    </view>
                                </view>
                            </view>
                        </view>
                    </scroll-view>
                </view>
            </view>
        </view>
        <!-- <toast class="toast_animate"></toast> -->
    </view>
</template>

<script>
// import toast from '../../components/toast3/index';
// page/cloud/index.js
export default {
    // components: {
    //     toast
    // },
    data() {
        return {
            list: ['1', '2', '3', '4', '5', '6', '7', '8', '9'],

            jplist: [
                {
                    img: 'https://img2.imgtp.com/2024/05/08/iWTES1kj.jpg',
                    name: '九五至尊',
                    price: 999,
                    buyNum: 1,
                    checked: true
                },
                {
                    img: 'https://img2.imgtp.com/2024/05/08/5n6My6nh.jpg',
                    name: '遵义红',
                    price: 666,
                    buyNum: 1,
                    checked: true
                },
                {
                    img: 'https://img2.imgtp.com/2024/05/08/d1Ev6Zjh.jpg',
                    name: '湄潭翠芽',
                    price: 888,
                    buyNum: 1,
                    checked: true
                }
            ],

            tabCur: 0,
            isLoad: false,
            sort: 1,
            sortUp: false,
            animationData: {},
            selected: 0
        };
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
        // this.reLoad();
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {
        // this.toastDialog = this.zpSelectComponent('.toast_animate');
    },
    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {
        // if (typeof this.getTabBar === 'function' && this.getTabBar()) {
        //     this.getTabBar().setData({
        //         selected: 1
        //     });
        // }
    },
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {},
    methods: {
        // reLoad() {
        //     this.setData({
        //         isLoad: true
        //     });
        //     setTimeout(() => {
        //         this.setData({
        //             isLoad: false
        //         });
        //     }, 800);
        // },

        toSort(e) {
            if (e.currentTarget.dataset.index == 2) {
                // this.setData({
                //     sortUp: !this.sortUp
                // });
				this.sortUp = !this.sortUp
                let sortList = this.jplist;
                var animation = uni.createAnimation({
                    duration: 600,
                    timingFunction: 'ease'
                });
                this.animation = animation;
                if (this.sortUp) {
                    sortList.sort((a, b) => {
                        return b.price - a.price;
                    });
                    animation.rotate(180).step();
                } else {
                    sortList.sort((a, b) => {
                        return a.price - b.price;
                    });
                    animation.rotate(0).step();
                }
                // this.setData({
                //     animationData: animation.export(),
                //     jplist: sortList
                // });
				this.animationData = animation.export()
				this.jplist = sortList
            }
            // this.setData({
            //     sort: e.currentTarget.dataset.index
            // });
			this.sort = e.currentTarget.dataset.index
        },

        TabSelect(e) {
            // this.reLoad();
            // this.setData({
            //     tabCur: e.currentTarget.dataset.index
            // });
			this.tabCur = e.currentTarget.dataset.index
        },

        //点击加入购物车
        addshopcar(e) {
            // app.watch();
            let shopCar = uni.getStorageSync('carInfo');
            if (shopCar.length != 0) {
                //判断购物车是否存在点击商品
                var result = shopCar.find((v) => {
                    return v.name == e.currentTarget.dataset.i.name;
                });
                if (result) {
                    uni.showToast({
                        title: '该商品已添加'
                    });
                    return;
                } else {
                    shopCar.push(e.currentTarget.dataset.i);
                    getApp().globalData.carNum++;
                    uni.setStorageSync('carInfo', shopCar);
                    this.toastDialog.showDialog({
                        content: '成功添加购物车',
                        icon: 'success'
                    });
                }
            } else {
                uni.setStorageSync('carInfo', [e.currentTarget.dataset.i]);
                getApp().globalData.carNum++;
                this.toastDialog.showDialog({
                    content: '成功添加购物车',
                    icon: 'success'
                });
            }
            // console.log(getApp().globalData.carNum + 'ccc')
            // var idx = e.currentTarget.dataset.idx
            // var dstleft = this.data.dstleft
            // var top
            // var left
            // //根据元素id取得元素坐标
            // wx.createSelectorQuery().select('#img' + idx).boundingClientRect(function (rect) {
            //   left = rect.left    // 节点的左边界坐标
            //   top = rect.top   // 节点的上边界坐标
            // }).exec()
            // var that = this
            // var anistr = "anim[" + idx + "]"//只修改数组中的单个对象属性的写法
            // wx.createSelectorQuery().select('#2').boundingClientRect(function (res) {
            // }).exec()
            // //延时执行是为了等上面取到数据
            // setTimeout(function () {
            //   that.data.anim[idx].translate((dstleft - left + wx.getSystemInfoSync().windowWidth - 100) % wx.getSystemInfoSync().windowWidth, (wx.getSystemInfoSync().windowHeight - top - 60) % wx.getSystemInfoSync().windowHeight).step()
            //   //导入动画
            //   that.setData({ [anistr]: that.data.anim[idx].export() })
            //   //export()方法执行后返回的对象不是animation,所以重新创建一下
            //   that.setData({
            //     [anistr]: wx.createAnimation(), count: that.data.count += 1
            //   })
            //   setTimeout(function () {
            //     //待进入购物车动画完成后，将圆点位置还原
            //     that.data.anim[idx].translate(0, 0).step({ duration: 0 })
            //     that.setData({ [anistr]: that.data.anim[idx].export() })
            //     that.setData({ [anistr]: wx.createAnimation() })
            //   }, 500)
            // }, 50)
        },

        goDetail(e) {
            // this._offset.value = Math.random()
            uni.navigateTo({
                url: '../productDetil/index?type=' + e.currentTarget.dataset.index + '&img=' + e.currentTarget.dataset.i
            });
        },

        showDetil(e) {
            this.toastDialog.showDialog({
                content: '该功能尚未开放',
                icon: 'warning'
            });
        },

        toSearch() {
            console.log('占位：函数 toSearch 未声明');
        }
    }
};
</script>
<style>
/* @import './index.css'; */
.fixed {
  position: fixed;
  z-index: 99;
}
.searchBoxs {
  height: 30px;
  width: calc(100% - 80rpx);
  color: #c4baba;
  font-size: 12px;
  border-radius: 15px;
  background-color: white;
  padding: 0 10px;
  z-index: 10;
  line-height: 30px;
  vertical-align: middle;
}

.VerticalNav.nav {
  width: 180rpx;
  white-space: initial;
}

.VerticalNav.nav .cu-item {
  width: 100%;
  text-align: center;
  background-color: #fff;
  margin: 0;
  border: none;
  height: 50px;
  position: relative;
}

.VerticalNav.nav .cu-item.cur {
  background-color: #f1f1f1;
  border-right: 5px solid currentColor;
  /* content: "1";
  position: absolute;
  background-color: currentColor;
  top: 0;
  bottom: 0;
  margin: auto; */
}

/* .cu-item.cur::after {
  
} */

.VerticalBox {
  display: flex;
}

.VerticalMain {
  background-color: #f1f1f1;
  flex: 1;
}
.steleton{
  height: 10px;
  width: 50%;
}
.steleton2{
  height: 10px;
  width: 80%;
}
.mb_2{
  border-bottom: 1px solid #f1f1f1;
}
</style>
